<template>
  <div class="prod-list">
      <prod-item 
        v-if="totalSize > 0"
        :list="prodList" 
        :show-num="showNum"
        @showDialog="showDialog"
      />
    <no-data v-else />
      <pagination 
        class="bg-white" 
        v-model="currPage" 
        :totalSize="totalSize"
        @onChangePageIndex="changePage"
      />
    </div>
</template>
<script>
const SHOW_CATE_NUM = 3 // 每个产品展示几个套餐，超过就有查看更多

import {
  Row,
  Col,
  Table,
  TableColumn,
  Tag,
  Button,
  Dialog,
  Image,
} from 'element-ui'

import Pagination from "@cmpt_pc/table/pagination"
import ProdListItem from '@views_pc/product/components/list-item'
import NoData from "@cmpt_pc/no-data"

import {
  getProdList
} from '@/api/modules/product'


export default {
  name: 'prod-list',
  components: {
    [ProdListItem.name]: ProdListItem,
    [Pagination.name]: Pagination,
    [NoData.name]: NoData
  },
  props: {
    params: {
      type: Object,
      default: {
        kind: '',
        sort: 0,
        zone_id: 0,
        keywords: ''
      }
    },
  },
  data() {
    return {
      showNum: SHOW_CATE_NUM,
      prodList: [],
      totalSize: 1,
      currPage: Number(this.$getUrlParam('page')) || 1,
    }
  },
  watch: {
    currPage(nw) {
      this.$mergePageParams({
        page: nw
      })
       this.getProdList()
    },
    params: {
      handler(nw) {
        this.reload(nw)
      },
      deep: true
    }
  },
  created() {
    this.getProdList()
  },
  methods: {
    reload(param) {
      this.$mergePageParams(param)
      this.prodList = []
      this.totalSize = 1
      this.currPage = 1
      this.getProdList()
    },
    async getProdList() {
      let param = {
        sort: this.params.sort,
        page: this.currPage,
        keywords: this.params.keywords,
      }
      this.params.kind >= 0 ? (param.kind = this.params.kind) : (delete param.kind)
      this.params.zone_id > 0 ? (param.zone_id = this.params.zone_id) : (delete param.zone_id)
      let self = this
      
      getProdList(param)
        .then(res => {
          if(res.data.total > 0){
            res.data.list.forEach(item => {
              item.toggleText = '查看更多'
              item.toggleIcon = 'down'
              
              item.renderRows = []
              item.skus = item.skus ? item.skus : []
              if(item.skus && item.skus.length){
                item.skus.forEach((skus, index) =>{
                  if(index < this.showNum){
                    item.renderRows.push(skus)
                  }
                })
              }
            })
            self.prodList = res.data.list
          }
          self.totalSize = res.data.total
          self.currPage = res.data.page
        })
    },
    // 弹窗
    showDialog(type, obj){
      this.$emit('showDialog', type, obj)
    },
    changePage(page) {
      this.currPage = page
    },
  }
}
</script>